<template>
  <view class="container">
    <view class="form-item">
      <text class="label">任务名称</text>
      <input v-model="form.taskName" placeholder="请输入任务名称" />
    </view>

    <view class="form-item">
      <text class="label">项目名称</text>
      <input v-model="form.projectName" placeholder="请输入项目名称" />
    </view>

    <view class="form-item">
      <text class="label">用户名</text>
      <input v-model="form.staffUsername" placeholder="请输入用户名" />
    </view>

    <view class="form-item">
      <text class="label">工作描述</text>
      <textarea v-model="form.description" placeholder="请输入工作描述" rows="4" />
    </view>

    <view class="form-item">
      <text class="label">上传截图</text>
      <button type="primary" size="mini" @click="chooseImage">选择图片</button>
      <image
        v-if="previewImage"
        :src="previewImage"
        mode="aspectFit"
        class="preview-image"
      />
    </view>

    <view class="form-item">
      <button type="primary" @click="submitForm">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        taskName: '',
        projectName: '',
        staffUsername: '',
        description: '',
        screenshotPath: ''
      },
      previewImage: ''
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.previewImage = tempFilePath;

          // 上传图片到服务器
          uni.uploadFile({
            url: 'https://your-api.com/api/upload', // 替换为你后端图片上传接口
            filePath: tempFilePath,
            name: 'file',
            success: (uploadRes) => {
              const data = JSON.parse(uploadRes.data);
              this.form.screenshotPath = data.path || data.url; // 返回值根据你后端来
              uni.showToast({ title: '上传成功', icon: 'success' });
            },
            fail: () => {
              uni.showToast({ title: '上传失败', icon: 'error' });
            }
          });
        }
      });
    },
    submitForm() {
      if (
        !this.form.taskName ||
        !this.form.projectName ||
        !this.form.staffUsername ||
        !this.form.description ||
        !this.form.screenshotPath
      ) {
        uni.showToast({ title: '请填写完整信息', icon: 'none' });
        return;
      }

      uni.request({
        url: 'https://your-api.com/api/progress/upload', // 替换为后端接口
        method: 'POST',
        data: this.form,
        success: () => {
          uni.showToast({ title: '提交成功', icon: 'success' });
          this.resetForm();
        },
        fail: () => {
          uni.showToast({ title: '提交失败', icon: 'error' });
        }
      });
    },
    resetForm() {
      this.form = {
        taskName: '',
        projectName: '',
        staffUsername: '',
        description: '',
        screenshotPath: ''
      };
      this.previewImage = '';
    }
  }
};
</script>

<style scoped>
.container {
  padding: 30rpx;
}
.form-item {
  margin-bottom: 30rpx;
}
.label {
  display: block;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  color: #333;
}
/* 修改后的输入框样式 */
input,
textarea {
  width: 100%;
  padding: 20rpx;  
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  font-size: 28rpx;
  background-color: #fff;
  box-sizing: border-box;
  /* 移除 line-height 设置 */
  min-height: 80rpx; /* 设置最小高度 */
}

/* 特别为 textarea 添加的样式 */
textarea {
  height: 200rpx; /* 固定高度 */
  resize: none; /* 禁止拖动调整大小 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.preview-image {
  width: 100%;
  max-height: 400rpx;
  margin-top: 20rpx;
  border-radius: 10rpx;
}
</style>
